<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {reqHospitalWork,reqHospitalDoctor} from "@/api/hospital";
import {useRoute,useRouter} from "vue-router";
import {HospitalWorkData,DoctorArr,Doctor} from "@/api/hospital/type.ts";
const $route = useRoute()
onMounted(()=>{
  getHospitalWork()
})
//第几页
let pageNo = ref<number>(1)
//一页多少
let limit = ref<number>(5)
//总共多少
let total = ref(0)
//接收请求的科室数据
let workData = ref<any>({})
//存储日期查询科室医生数据
let workTime = ref<any>({})
/**
 * 获取科室的挂号状态
 */
async function getHospitalWork(){
  let res:HospitalWorkData = await reqHospitalWork(pageNo.value,limit.value,$route.query.hoscode as string,$route.query.depcode as string)
  workData.value=res.data
  total.value=res.data.total
  workTime.value=workData.value.bookingScheduleList[0]
  await getDcotorWorkData()
}
//存储点击挂号卡片医院的信息
let docArr = ref<DoctorArr>([])
/**
 * 获取医生的信息
 */
async function getDcotorWorkData(){
  // console.log($route.query.hoscode,$route.query.depcode,workTime.value.workDate)
  let res = await reqHospitalDoctor($route.query.hoscode,$route.query.depcode,workTime.value.workDate)
  docArr.value=res.data
  // console.log(res)
}
/**
 * 页数改变时触发
 */
function changePages() {
  getHospitalWork()
}
/**
 * 点击卡片获取医生的数据
 * @param item
 */
function changeTime(item:any){
  workTime.value=item
  // console.log(workTime.value)
  getDcotorWorkData()
}

let morningDoctor = computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime===0
  })
})
let afternoonDoctor = computed(()=>{
  return docArr.value.filter((doc:Doctor)=>{
    return doc.workTime===1
  })
})
const $router = useRouter()

/**
 * 路由跳转，进入到就诊人的页面
 * @param doctor 携带的医生id
 */
function goStep2(doctor:object){
  // console.log(doctor.id)
  $router.push({
    path:'/hospital/register_step2',
    query:{
      id:doctor.id
    }
  })
}
</script>
<template>
<div class="step1">
  <div class="top">
    <p>{{ workData.baseMap?.hosname}}</p>
    <i>丨</i>
    <p>{{ workData.baseMap?.bigname }}</p>
    <em>·</em>
    <p>{{ workData.baseMap?.depname }}</p>
  </div>
  <div class="center">
    <div class="tit">{{ workData.baseMap?.workDateString}}</div>
    <div class="content">
      <ul>
        <li v-for="item in workData.bookingScheduleList" :class="{active:item.status==-1||item.availableNumber==-1,cur:item.workDate==workTime.workDate}" @click="changeTime(item)">
          <div class="date">{{ item.workDateMd }}&nbsp;&nbsp;{{item.dayOfWeek}}</div>
          <div class="state" >
            <div v-if="item.status==-1">停止挂号</div>
            <div v-else-if="item.status==0">{{item.availableNumber==-1?'约满了':`有号${item.availableNumber}`}}</div>
            <div v-else-if="item.status==1">即将放号</div>
          </div>
        </li>
      </ul>
    </div>
    <el-pagination
        layout="prev, pager, next"
        v-model:current-page="pageNo"
        :total="total"
        @current-change="changePages"
    />
  </div>
  <div class="showDoctor">
    <div class="doctor" v-if="workTime.status==1||workTime.availableNumber!=-1">
      <div class="morning">
        <div class="tit">
          <svg t="1693472108976" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4208" width="32" height="32"><path d="M752.41931153 240.7063601c8.36993432 0 15.62255883 3.08990502 21.72821045 9.16589356 6.1353147 6.08093262 9.18566918 13.3928833 9.18566918 21.73315382 0 8.55285621-3.05035376 15.85986352-9.18566918 21.94079614l-43.67394996 43.66900658c-5.93261719 5.97216773-13.17041016 8.95825195-21.72326709 8.95825195-8.87420678 0-16.20098901-2.98608422-22.08911085-8.75061035-5.88317847-5.87329102-8.80004906-13.2890625-8.80004906-22.14843774 0-8.54791283 2.95642114-15.75604272 8.91375732-21.72821044l43.66900659-43.67394996c6.14025879-6.07598853 13.44726539-9.16589356 21.98034668-9.16589356z m37.66223167 240.39459181h61.79809547c8.52813721 0 15.82031227 2.98608422 21.83697534 9.06207276C879.78271508 496.24395728 882.78857422 503.45208717 882.78857422 512c0 8.55285621-3.00585914 15.85986352-9.07196021 21.83697533-6.01666236 6.07598853-13.30883813 9.06207276-21.83697534 9.06207276h-61.79809547c-8.52813721 0-15.80053734-2.98608422-21.86663841-9.06207276-6.01666236-5.97711182-9.05712867-13.2890625-9.05712867-21.83697533 0-8.55285621 3.04046631-15.76098609 9.05712867-21.83697533 6.06610107-6.07598853 13.33850122-9.06207276 21.86663841-9.06207276zM512 141.21142578c8.52813721 0 15.79064917 3.08990502 21.85180688 9.06207276 6.02160645 6.08093262 9.05712867 13.3928833 9.05712867 21.83697533v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697534-6.06610107 6.07598853-13.32861305 9.16589356-21.85675025 9.16589355-8.53802467 0-15.80053734-3.08990502-21.86663842-9.16589355-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697534V172.11047387c0-8.44409203 3.03552222-15.76098609 9.05218458-21.83697533C496.20440674 144.3013308 503.46691871 141.21142578 512.00494408 141.21142578zM271.81304907 240.7063601c8.36499023 0 15.61267066 3.08990502 21.743042 9.16589356l43.66900659 43.67394996c6.14025879 6.07598853 9.17083764 13.38793922 9.17083764 21.72821044 0 8.55285621-3.01080323 15.86480689-9.05712938 21.83697534-6.03149391 6.08093262-13.30389404 9.06207276-21.85180617 9.06207275-8.69622827 0-16.02795386-2.98608422-21.95068359-8.85443115l-43.68383814-43.67395068c-5.97216773-5.97216773-8.92858886-13.28411842-8.92858886-22.03967284 0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697462 6.01666236-5.97216773 13.30883813-9.06207276 21.85675096-9.06207276h-0.03955126z m436.93725586 436.91253615c8.36499023 0 15.60772729 2.98608422 21.72326709 9.16589355l43.67394995 43.67395067c6.1353147 6.17980933 9.18566918 13.38793922 9.18566919 21.93585205 0 8.34521461-3.05035376 15.65716529-9.18566919 21.73315382-6.1105957 6.17980933-13.35827613 9.16589356-21.72326636 9.16589356-8.52813721 0-15.84008789-2.98608422-21.98034668-9.16589356l-43.66900659-43.66900587c-5.95733618-5.87329102-8.91375732-13.1852417-8.91375732-21.73315453 0-8.55285621 3.01080323-15.86480689 9.05712866-21.94079614 6.03149391-6.07598853 13.32861305-9.16589356 21.85180689-9.16589355h-0.01977564zM512.00494408 388.40380836c-34.12243628 0-63.22192359 12.05310035-87.39239525 36.2532351-24.1358645 24.10125732-36.21368384 53.25018335-36.21368384 87.34295654 0 34.0927732 12.07782007 63.24169922 36.21368384 87.44677734C448.78796387 623.53814721 477.88250709 635.59619164 512 635.59619164c34.12243628 0 63.23181176-12.05310035 87.4072268-36.15435838C623.51837158 575.2466433 635.59619164 546.09771729 635.59619164 512c0-34.0927732-12.07782007-63.24169922-36.18896484-87.34295654C575.23181176 400.45690942 546.12243628 388.40380836 512 388.40380836zM172.12036133 481.10095191h61.79809547c8.53802467 0 15.80053734 2.98608422 21.86663841 9.06207276 6.01666236 6.08093262 9.05712867 13.2890625 9.05712867 21.83697533 0 8.55285621-3.04046631 15.85986352-9.05712867 21.83697533-6.06610107 6.07598853-13.32861305 9.06207276-21.86663841 9.06207276h-61.79809547c-8.52813721 0-15.81042481-2.98608422-21.83697534-9.06207276C144.21728492 527.85986352 141.21142578 520.54791283 141.21142578 512c0-8.55285621 3.00585914-15.76098609 9.07196021-21.83697533 6.03149391-6.07598853 13.30883813-9.06207276 21.83697534-9.06207276zM512.00494408 759.19238258c8.52813721 0 15.79064917 2.98608422 21.85180617 9.06207274 6.02160645 6.08093262 9.05712867 13.2890625 9.05712938 21.83697535v61.79809546c0 8.55285621-3.03552222 15.85986352-9.0521853 21.83697533C527.79559326 879.80249 520.53308129 882.78857422 512 882.78857422c-8.53802467 0-15.80053734-2.98608422-21.86663842-9.06207276-6.01666236-5.97711182-9.0521853-13.2890625-9.05218458-21.83697533v-61.79809546c0-8.55285621 3.03552222-15.76098609 9.05218458-21.83697534 6.06610107-6.07598853 13.32861305-9.06207276 21.86663842-9.06207275z m-196.47839379-81.57348633c8.5034182 0 15.80053734 2.98608422 21.84686279 9.16589355 6.03149391 6.08093262 9.07196021 13.3928833 9.07196021 21.94079614 0 8.44409203-3.08001685 15.65222192-9.19555664 21.72821044l-43.67394995 43.67394996c-6.10565162 6.17980933-13.34838867 9.16589356-21.72326637 9.16589356-8.54791283 0-15.84008789-2.98608422-21.85180687-8.96319533-6.07104516-6.07598853-9.0769043-13.38793922-9.0769043-21.93585205 0-8.65173364 2.95642114-15.96862769 8.92858887-21.94079614l43.68383813-43.66900658c6.10565162-6.17980933 13.44232202-9.16589356 21.95068359-9.16589355h0.03955054zM512 326.60571289c33.628052 0 64.6506958 8.34521461 93.0481565 24.81811547 28.42712378 16.69042992 50.92163109 39.1404419 67.4637456 67.56756568 16.57177758 28.32824708 24.86755347 59.32617188 24.86755347 93.00860596 0 33.68243408-8.27600098 64.68035888-24.86755347 93.10748267-16.58166504 28.32824708-39.08605981 50.77825904-67.4637456 67.4637456-28.36285424 16.58166504-59.37561059 24.82305884-93.0481565 24.82305884-33.66760254 0-64.67047143-8.24139381-93.05804468-24.81811547-28.37768578-16.69042992-50.86230492-39.14538598-67.46374487-67.46868897-16.58166504-28.42712378-24.86755347-59.42504859-24.86755348-93.10748267 0-33.68243408 8.31555152-64.68035888 24.86755348-93.00860596 16.55200195-28.42712378 39.03662109-50.87713647 67.46374487-67.56262231C447.35424828 334.94598413 478.371948 326.60571289 512 326.60571289z" p-id="4209" fill="#1296db"></path></svg>
          <span>上午号源</span>
        </div>
        <div class="doctorDesc" v-for="doctor in morningDoctor" v-bind:key="doctor.id">
          <div class="l">
            <div class="t">
              <span>{{ doctor.title }}</span><i>丨</i><span>{{doctor.docname}}</span>
            </div>
            <div class="b">
              {{doctor.skill}}
            </div>
          </div>
          <div class="r">
            <div class="money">
              ￥{{doctor.amount}}
            </div>
            <el-button class="el-button" size="large" @click="goStep2(doctor)">剩余{{doctor.availableNumber}}</el-button>
          </div>
        </div>
      </div>
      <div class="afternoon">
        <div class="tit">
          <svg t="1693472251744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9054" width="32" height="32"><path d="M369.86 594.04c45.34-78.5 145.73-105.38 224.23-60.04a164.171 164.171 0 0 1 60.04 60.04H369.86z m306.23 82.05z m-492.26 0h656.35c22.66 0 41.02 18.36 41.02 41.02 0 22.66-18.36 41.02-41.02 41.02H183.83c-22.66 0-41.02-18.36-41.02-41.02-0.01-22.66 18.36-41.02 41.02-41.02z" fill="#1296db" p-id="9055"></path><path d="M678.58 383.66l43.51-43.51c24.03-24.03 62.99-24.03 87.02 0 24.03 24.03 24.03 62.99 0 87.02l-43.51 43.51c-24.14 23.92-63.1 23.74-87.02-0.39-23.77-23.99-23.77-62.65 0-86.63zM512 204.34c33.98 0 61.53 27.55 61.53 61.53v61.53c-0.14 33.98-27.8 61.42-61.78 61.28-33.79-0.14-61.15-27.49-61.28-61.28v-61.53c0-33.98 27.55-61.53 61.53-61.53zM217.08 340.15c24.03-24.03 62.99-24.03 87.02 0l43.51 43.51c24.03 24.03 24.03 62.99 0 87.02-24.03 24.03-62.99 24.03-87.02 0l-43.51-43.51c-24.03-24.03-24.03-62.99 0-87.02z" fill="#1296db" opacity=".3" p-id="9056"></path></svg>
          <span>下午号源</span>
        </div>
        <div class="doctorDesc" v-for="doctor in afternoonDoctor" v-bind:key="doctor.id">
          <div class="l">
            <div class="t">
              <span>{{ doctor.title }}</span><i>丨</i><span>{{doctor.docname}}</span>
            </div>
            <div class="b">
              {{doctor.skill}}
            </div>
          </div>
          <div class="r">
            <div class="money">
              ￥{{doctor.amount}}
            </div>
            <el-button class="el-button" size="large" @click="goStep2(doctor)">剩余{{doctor.availableNumber}}</el-button>
          </div>
        </div>
      </div>
    </div >
    <div class="putNumberTime" v-else>
      <span>2023-06-06</span>
      <span>放号</span>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.step1{
  padding: 65px 20px 0;
  .top{
    color:#7f7f7f;
    display: flex;
    i{margin: 0 5px;}
    em{margin: 0 8px;}
    margin-bottom: 30px;
  }
  .center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tit{
      text-align: center;
      font-weight: 600;
      margin-bottom: 20px;
    }
    .content{
      width: 100%;
      margin-bottom: 15px;
      ul{
        display: flex;
        .active{
          border: 2px solid #7f7f7f;
          color: #7f7f7f;
          .date{
            background: #c4c2c2;
          }
        }
        li{
          width: 29%;
          text-align: center;
          margin: 0 0.5%;
          border: 2px solid skyblue;
          font-weight: 600;
          color: #7f7f7f;
          transition: .3s;
          .date{
            height: 30px;
            line-height: 30px;
            background: #e0eeff;
          }
          .state{
            height: 40px;
            line-height: 40px;
          }
        }
        li:hover{
          cursor: pointer;
        }
        .cur{
          transform: scale(1.05);
        }
      }
    }
  }
  .showDoctor{
    width: 100%;
    margin-top: 15px;
    .doctor{
      //.morning{}
      //.afternoon{}
      .morning,.afternoon{
        .tit{
          font-size: 18px;
          color: #7f7f7f;
          display: flex;
          line-height: 32px;
        }
        .doctorDesc{
          display: flex;
          justify-content: space-between;
          margin: 10px 0;
          border-bottom: 1px solid #7f7f7f;
          .l{
            .t{
              color: #2488fa;
              font-size: 20px;
              margin-bottom: 20px;
            }
            .b{
              color: #7f7f7f;
              margin-bottom: 10px;
            }
          }
          .r{
            display: flex;
            .money{
              line-height: 42px;
              margin-right: 30px;
              color: #7f7f7f;
            }
            .el-button{
              background: #55a6fe;
              color: white;
            }
          }
        }
      }
    }
    .putNumberTime{
      text-align: center;
      color: #55a6fe;
      font-size: 26px;
      font-weight: 600;
    }
  }
}
</style>